<template>
  <div>
      <!-- 导航栏 --------start-->
    <van-search
      v-model="contact"
      shape="round"
      background="#3296fa"
      placeholder="搜索联系人"
    >
    <a href="#" slot="left" class="fanhui" @click="$router.back()">
      <van-icon name="arrow-left" />
      <span>返回</span>
    </a>
    </van-search>
    <!-- 导航栏 --------end-->

    <!-- <van-cell title="我的联系人" /> -->
    <!-- 联系人 -->
<van-collapse v-model="activeNames">
  <van-collapse-item title="好友" name="1">
    <van-contact-card
    v-for="currentContact in reshi" :key="currentContact.tel"
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
        />
  </van-collapse-item>
  <van-collapse-item title="基友" name="2">
    <van-contact-card
    v-for="currentContact in currentContact" :key="currentContact.tel"
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
        />
  </van-collapse-item>
  <van-collapse-item title="家人" name="3">
    <van-contact-card
    v-for="currentContact in jishu" :key="currentContact.tel"
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
        />
  </van-collapse-item>
</van-collapse>

  <!-- 添加联系人 -->
    <van-contact-card type="add" @click="onAdd" />
    <!-- 添加联系人弹层   start/ -->
    <van-popup v-model="showAddDialog" position="top" style="height: 100%">
       <van-nav-bar
        title="添加联系人"
        left-text="返回"
        left-arrow
        @click-left='showAddDialog=false'
        />
        <van-contact-edit
        is-edit
        :contact-info="editingContact"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
    <!-- 添加联系人弹层   end -->
    <!-- 编辑联系人弹层   start/ -->
    <van-popup v-model="showEditDialog" position="top" style="height: 100%">
       <van-nav-bar
        title="编辑联系人"
        left-text="返回"
        left-arrow
        @click-left='showEditDialog=false'
        />
        <van-contact-edit
        is-edit
        :contact-info="currentContact"
        @save="onEditSave"
        @delete="onEditDelete"
      />
    </van-popup>
    <!-- 编辑联系人弹层   end -->
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      activeNames: ['1'],
      contact: null,
      showAddDialog: false,
      showEditDialog: false,
      editingContact: {}, // 联系人信息
      currentContact: [
        {
          name: '宋玉',
          tel: '15236525841'
        },
        {
          name: '张成',
          tel: '18536522542'
        },
        {
          name: '黎吱吱',
          tel: '18265259635'
        },
        {
          name: '吴丽',
          tel: '16525452636'
        }
      ],
      reshi: [
        {
          name: '王哈哈',
          tel: '15826525841'
        },
        {
          name: '网易宝',
          tel: '196536522542'
        },
        {
          name: '泼皮猴',
          tel: '18265259635'
        },
        {
          name: '六盘水',
          tel: '19255452636'
        }
      ],
      jishu: [
        {
          name: '王哈哈',
          tel: '15826525841'
        },
        {
          name: '网易宝',
          tel: '196536522542'
        },
        {
          name: '泼皮猴',
          tel: '18265259635'
        },
        {
          name: '六盘水',
          tel: '19255452636'
        }
      ]

      // currentContact: {
      //   name: '张三',
      //   tel: '13000000000'
      // }
    }
  },
  methods: {
    onAdd () {
      this.showAddDialog = true
    },
    onSave (contactInfo) {
      Toast('保存')
    },
    onDelete (contactInfo) {
      Toast('删除')
    },
    onEdit () {
      this.showEditDialog = true
    },
    onEditSave (contactInfo) {
      Toast('保存')
    },
    onEditDelete (contactInfo) {
      Toast('删除')
    }
  }
}
</script>

<style scoped lang='less'>
  .van-contact-card::before{
    content: unset;
  }
  /deep/.van-contact-card--edit{
    border: 0 solid #ebedf0
  }
  /deep/.van-button--danger {
    color: #fff;
    background-color: #3296fa;
    border: 0.02667rem solid #3296fa;
}
.fanhui{
    font-size: 30px;
    line-height: 30px;
    padding-right: 15px;
    :hover{
      color: black;
    }
}
/deep/.van-cell__title span{
  font-weight: bold;
  color: #555;
}
</style>
